<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>实时数据监控</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f7fa;
      margin: 0;
      padding: 20px;
    }

    .content-module {
      background: white;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      padding: 20px;
    }

    .page-title {
      text-align: center;
      color: #333;
    }

    .chart-section {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .data-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #mainChart canvas {
      width: 400px !important;
      height: 300px !important;
      margin-bottom: 30px;
    }

    .pie-chart-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.pie-wrapper {
  width: 200px;
  height: 200px;
  position: relative;
}

.pie-wrapper canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

    .update-time {
      text-align: center;
      margin-top: 20px;
      color: #666;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    .data-table th, .data-table td {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: center;
    }

    .param-settings {
      margin-top: 30px;
    }

    .slider-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }

    .slider-group label {
      font-size: 16px;
    }
  </style>

  <!-- 引入 Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="content-module">
    <h1 class="page-title">实时数据监控</h1>

    <!-- 数据图表区域 -->
    <section class="chart-section">
      <div class="data-panel">
        <canvas id="mainChart" width="400" height="300"></canvas>
      </div>
      

      <div class="pie-chart-container">
        <div class="pie-wrapper">
          <canvas id="pieChart1"></canvas>
        </div>
        <div class="pie-wrapper">
          <canvas id="pieChart2"></canvas>
        </div>
      </div>
    </section>
    
    <!-- 更新时间 -->
    <div class="update-time">
      <p>数据最后更新时间：<span id="lastUpdateTime">2024-07-15 14:30:00 &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;              设备使用情况</span></p>
    </div>
<!-- 扇形图区域 -->
<section class="pie-chart-section">
  
</section>
    <!-- 数据列表区域 -->
    <section class="data-list">
      <h2>关键指标监控</h2>
      <table class="data-table">
        <tr><th>指标名称</th><th>当前值</th><th>单位</th></tr>
        <tr><td>VR设备在线量</td><td id="vrOnlineCount">128</td><td>台</td></tr>
        <tr><td>并发用户数</td><td id="currentUsers">42</td><td>人</td></tr>
        <tr><td>渲染任务队列</td><td>7</td><td>个</td></tr>
      </table>
    </section>




    <!-- 参数设置区 -->
    <div class="param-settings">
      <h3>设备参数设置</h3>
      <div class="slider-group">
        <label>工作转速：<input type="range" min="0" max="3000"></label>
        <label>温度阈值：<input type="range" min="20" max="120"></label>
      </div>
    </div>
  </div>

  <script>
    // 模拟数据 - 折线图数据
    const lineData = {
      labels: Array.from({ length: 10 }, (_, i) => i + 1),
      datasets: [{
        label: '运行状态',
        data: [10, 30, -5, 50, 15, 60, 20, 45, 10, 70],
        borderColor: '#ff6384',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        tension: 0.4,
        fill: true,
        pointRadius: 4,
        pointBackgroundColor: '#ff6384'
      }]
    };

    new Chart(document.getElementById('mainChart'), {
      type: 'line',
      data: lineData,
      options: {
        responsive: false,
        plugins: {
          legend: { display: false },
          title: {
            display: true,
            text: '设备运行趋势'
          }
        }
      }
    });

    // 饼图1
    new Chart(document.getElementById('pieChart1'), {
      type: 'pie',
      data: {
        labels: ['空闲', '运行', '故障'],
        datasets: [{
          data: [30, 50, 20],
          backgroundColor: ['#4CAF50', '#2196F3', '#F44336']
        }]
      },
      options: {
        plugins: {
          legend: {
            position: 'bottom'
          },
          title: {
            display: true,
            text: '设备状态分布'
          }
        }
      }
    });

    // 饼图2
    new Chart(document.getElementById('pieChart2'), {
      type: 'doughnut',
      data: {
        labels: ['Windows', 'Linux', 'macOS'],
        datasets: [{
          data: [45, 35, 20],
          backgroundColor: ['#FFC107', '#673AB7', '#03A9F4']
        }]
      },
      options: {
        plugins: {
          legend: {
            position: 'bottom'
          },
          title: {
            display: true,
            text: '操作系统分布'
          }
        }
      }
    });
  </script>
</body>
</html>